<template>
  <view class="head" :style="{ paddingTop: top + 'px' }">
    <view class="title flex-center">首页</view>
    <view class="head align-center justify-between">
      <view class="left align-center">{{ user_info.HotelName }}</view>
      <view class="date">{{ moment().format('YYYY-MM-DD') }}</view>
    </view>
    <view class="top-num align-center">
      <view
        class="item flex-center flex-column"
        v-for="item in topList"
        :key="item.type"
      >
        <view class="num">{{ item.num }}</view>
        <view class="text">{{ item.type }}</view>
      </view>
    </view>
  </view>

  <view class="center">
    <u-grid :border="false" @click="" col="4">
      <u-grid-item
        v-for="item in centerList"
        :key="item.name"
        @click="route.$route_to('/homePages' + item.url)"
      >
        <image
          :src="'../../static/images/home/' + item.imgurl + '.png'"
          class="img"
        ></image>
        <text class="text">{{ item.name }}</text>
      </u-grid-item>
    </u-grid>
  </view>

  <!-- 营业收入 -->
  <view class="operating-income">
    <view class="operating-income-title">营业收入</view>
    <view class="operating-income-content flex-wrap">
      <view class="item" v-for="item in bottomList" :key="item.name">
        <view class="num">{{ item.num }}</view>
        <view class="name">{{ item.name }}</view>
      </view>
    </view>
  </view>
</template>

<script lang="ts" setup>
const user_info = ref(getUserInfo())
import { ref, onMounted, computed } from 'vue'
import { onLoad } from '@dcloudio/uni-app'
import moment from 'moment'
import route from '@/utils/route'
import {
  ViewsV2,
  INF_ViewsV2_res,
  INF_HomeViews_info
} from '@/api/server/v2/home'
import { gethotelreportbyday } from '@/api/server/v2/open'
import { getUserInfo } from '@/storage/login'
const top = ref()
const topList = ref([
  { num: 888, type: '营业收入' },
  { num: 888, type: '房租收入' },
  { num: 888, type: '财务收款' },
  { num: 888, type: '其他' }
])
const centerList = ref([
  { name: '营业日报', imgurl: 'business-daily' },
  { name: '收益管理', imgurl: 'revenue-management' },
  { name: '异动明细', imgurl: 'change-details' },
  { name: '经营汇总', imgurl: 'operations-summary' },
  { name: '班结缴款', imgurl: 'class-pay' },
  { name: '消费明细', imgurl: 'consumption-details' },
  { name: '收款明细', imgurl: 'payment-details' },
  { name: '我的工单', imgurl: 'my-work-order', url: '/work-order/index' }
])
const Summary = ref<any>()
const HomeViews: any | Array<INF_HomeViews_info> = ref<
  Array<INF_HomeViews_info>
>([])
const bottomList = ref([
  { num: 111, name: '全日房' },
  { num: '¥', name: '平均房价' },
  { num: '¥', name: 'Rev PAR' },
  { num: '', name: '出租率' },
  { num: 0, name: '钟点房' },
  { num: 0, name: '自用房' },
  { num: 0, name: '维修房' },
  { num: 0, name: '住客数' }
])
const roomNum = (num: Array<number>) => {
  return num.reduce((acc: number, cur: number) => {
    return (
      acc +
      HomeViews.value.filter((item: INF_HomeViews_info) => item.UseFlag === cur)
        .length
    )
  }, 0)
}
onMounted(() => {
  const { safeAreaInsets } = uni.getSystemInfoSync()
  top.value = safeAreaInsets?.top || 0
})

const getData = async () => {
  ViewsV2().then((res) => {
    const result: INF_ViewsV2_res = res as INF_ViewsV2_res
    Summary.value = result.Summary
    HomeViews.value = result.HomeViews
    // console.log(Summary.value)
    bottomList.value[0].num = (
      (Summary.value.Rate * Summary.value.TotalHomes) /
      100
    ).toFixed(2)
    bottomList.value[1].num = '¥' + Summary.value.AvgPrice.toFixed(2)
    bottomList.value[2].num = '¥' + Summary.value.Rp.toFixed(2)
    bottomList.value[3].num = Summary.value.Rate.toFixed(2) + '%'
    bottomList.value[4].num = roomNum([104, 107]).toFixed(2)
    bottomList.value[5].num = roomNum([105]).toFixed(2)
    bottomList.value[6].num = roomNum([200, 201]).toFixed(2)
    bottomList.value[7].num = (
      Summary.value?.TodayReceive +
      Summary.value?.Xuzhu -
      Summary.value?.TodayLeave
    ).toFixed(2)
    // totalResidents.value
  })

  // const res = await gethotelreportbyday(moment().format('YYYY-MM-DD'))
  // console.log(res)
}
onLoad(() => {
  getData()
})
</script>

<style lang="scss" scoped>
.head {
  height: 352rpx;
  background-color: #409eff;
  .title {
    height: 88rpx;
    color: #fff;
  }
  .head {
    margin: 0 32rpx;
    height: 112rpx;
    background: rgba(255, 255, 255, 0.4);
    border-radius: 8rpx 8rpx 8rpx 8rpx;
    padding: 0 54rpx 0 24rpx;
    .left {
      min-width: 248rpx;
      height: 60rpx;
      background: #ffffff;
      border-radius: 8rpx 8rpx 8rpx 8rpx;
      opacity: 1 !important;
      padding-left: 28rpx;
      color: #327dfb;
    }
    .date {
      color: #ffffff;
    }
  }
  .top-num {
    height: 152rpx;
    .item {
      width: 25%;
      color: #ffffff;
      font-size: 24rpx;
      .num {
        font-size: 36rpx;
      }
    }
  }
}
.center {
  height: 310rpx;
  background-color: #fff;
  margin-bottom: 12rpx;
  .img {
    width: 52rpx;
    height: 52rpx;
    padding-top: 40rpx;
  }
  .text {
    font-size: 24rpx;
    margin-top: 12rpx;
  }
}
.operating-income {
  min-height: 680rpx;
  background-color: #fff;
  padding: 20rpx 32rpx 0;
  .operating-income-title {
    height: 72rpx;
    line-height: 72rpx;
    margin-left: 8rpx;
    font-weight: 500;
  }
  .operating-income-content {
    .item {
      width: 220rpx;
      height: 144rpx;
      background: #f3f3f3;
      border-radius: 16rpx 16rpx 16rpx 16rpx;
      margin: 0 12rpx 12rpx 0;
      .num {
        margin: 30rpx 0 0 32rpx;
      }
      .name {
        font-size: 24rpx;
        margin: 20rpx 0 0 32rpx;
      }
    }
    .item:nth-child(3n) {
      margin: 0 0 12rpx 0;
    }
  }
}
</style>
